<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item> {{$t('Mirror_note')}}{ "registry-mirrors": ["https://xxx.mirror.aliyuncs.com"] } </el-breadcrumb-item>
    </el-breadcrumb>
     <el-divider></el-divider>
    <div class="tips">
      <p>{{ $t('Mirror_tips') }}</p>
      <p>sudo systemctl daemon-reload</p>
      <p>sudo systemctl restart docker</p>
    </div>
   
      <el-form ref="form" >
        <el-form-item
          :title=" $t('Mirror_address')"
          :label="$t('Mirror_configuration')  "
          :autosize="{ minRows: 4, maxRows: 10}"
          :rules="[
        { required: true, message: this.$t('Mirror_configuration')}
      ]"
        >
          <b-code-editor v-model="content" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"> {{ $t('Mirror_submit')}}</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Input, Button,Breadcrumb,BreadcrumbItem,Divider } from 'element-ui'
import http from '@/utils/http'
Vue.use(Form)
Vue.use(Divider)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)

export default {
  data () {
    return {
      content: ''
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
  },
  mounted () {
    this.getMirrors()
  },
  methods: {
    getMirrors () {
      http({
        url: '/daemonload',
        method: 'GET',
        timeout: 2000000
      })
        .then(res => {
        if (res.Code === 200) {
          this.content = res.Data
        }
      }).catch((err) => {
        return err
      })
    },
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          let obj=JSON.parse(str);
          if(typeof obj == 'object' && obj ){
            return true;
          }else{
            return false;
          }
        } catch(e) {
          return false;
        }
      }else if (typeof str == 'object'  && str) {
        return true;
      }
    },
    onSubmit(){
      if (!this.isJSON(this.content)){
        this.$message.error(`json格式错误`)
        return false
      }
      http({
        url: '/daemonsave',
        method: 'POST',
        data:{content:this.content},
        timeout: 2000000,
        headers: {
          token: JSON.parse(localStorage.getItem('user')).token
        },
      })
        .then(res => {
          if (res.Code === 200) {
            this.$message.success(this.$t('Image_saveSuccess'));
            this.getMirrors()
          }else{
            this.$message.error(this.$t('Image_updateFail'));
          }
        }).catch((err) => {
        return err
      })

    }
    // 切换ip

  }
}
</script>

<style lang="scss" scoped>
.tips{
  font-size: 12px;
  color: #ccc;
  padding-left: 10px;
  margin-bottom: 24px;
}

</style>
